<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">
	<h1 class="title ui-widget-header ui-corner-all">DataTable - Client Pagination/Sorting</h1>
		<div class="entry">
                <p>DataTable has built-in support for pagination and sorting on client side.</p>
                             
                <h3>Default Paginator</h3>
				<p:dataTable var="car" value="#{tableBean.cars}" paginator="true" rows="10">
					<p:column sortBy="#{car.model}">
						<f:facet name="header">
							<h:outputText value="Model" />
						</f:facet>
						<h:outputText value="#{car.model}" />
					</p:column>

					<p:column sortBy="#{car.year}">
						<f:facet name="header">
							<h:outputText value="Year" />
						</f:facet>
						<h:outputText value="#{car.year}" />
					</p:column>

					<p:column sortBy="#{car.manufacturer}">
						<f:facet name="header">
							<h:outputText value="Manufacturer" />
						</f:facet>
						<h:outputText value="#{car.manufacturer}" />
					</p:column>

					<p:column sortBy="#{car.color}">
						<f:facet name="header">
							<h:outputText value="Color" />
						</f:facet>
						<h:outputText value="#{car.color}" />
					</p:column>
				</p:dataTable>
				
				<h3>Customized Paginator</h3>
				<p:dataTable var="car" value="#{tableBean.cars}" paginator="true" rows="10"
					paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown} "
					rowsPerPageTemplate="10,15,20"
					previousPageLinkLabel="&lt;"  nextPageLinkLabel="&gt;">
					
					<p:column sortBy="#{car.model}">
						<f:facet name="header">
							<h:outputText value="Model" />
						</f:facet>
						<h:outputText value="#{car.model}" />
					</p:column>

					<p:column sortBy="#{car.year}">
						<f:facet name="header">
							<h:outputText value="Year" />
						</f:facet>
						<h:outputText value="#{car.year}" />
					</p:column>

					<p:column sortBy="#{car.manufacturer}">
						<f:facet name="header">
							<h:outputText value="Manufacturer" />
						</f:facet>
						<h:outputText value="#{car.manufacturer}" />
					</p:column>

					<p:column sortBy="#{car.color}">
						<f:facet name="header">
							<h:outputText value="Color" />
						</f:facet>
						<h:outputText value="#{car.color}" />
					</p:column>
				</p:dataTable>
					
				<h3>Source</h3>
				<p:tabView>
					<p:tab title="datatableClient.xhtml">
<pre name="code" class="xml">
&lt;h3&gt;Default Paginator&lt;/h3&gt;
&lt;p:dataTable var="car" value="\#{tableBean.cars}" paginator="true" rows="10"&gt;
	&lt;p:column&gt;
		&lt;f:facet name="header"&gt;
			&lt;h:outputText value="Model" /&gt;
		&lt;/f:facet&gt;
		&lt;h:outputText value="\#{car.model}" /&gt;
	&lt;/p:column&gt;

	&lt;p:column&gt;
		&lt;f:facet name="header"&gt;
			&lt;h:outputText value="Year" /&gt;
		&lt;/f:facet&gt;
		&lt;h:outputText value="\#{car.year}" /&gt;
	&lt;/p:column&gt;

	&lt;p:column&gt;
		&lt;f:facet name="header"&gt;
			&lt;h:outputText value="Manufacturer" /&gt;
		&lt;/f:facet&gt;
		&lt;h:outputText value="\#{car.manufacturer}" /&gt;
	&lt;/p:column&gt;

	&lt;p:column&gt;
		&lt;f:facet name="header"&gt;
			&lt;h:outputText value="Color" /&gt;
		&lt;/f:facet&gt;
		&lt;h:outputText value="\#{car.color}" /&gt;
	&lt;/p:column&gt;
&lt;/p:dataTable&gt;

&lt;h3&gt;Customized Paginator&lt;/h3&gt;
&lt;p:dataTable var="car" value="\#{tableBean.cars}" paginator="true" rows="10"
	paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown} "
	rowsPerPageTemplate="10,15,20"
	previousPageLinkLabel="&amp;lt;"  nextPageLinkLabel="&amp;gt;"&gt;
	
	&lt;p:column&gt;
		&lt;f:facet name="header"&gt;
			&lt;h:outputText value="Model" /&gt;
		&lt;/f:facet&gt;
		&lt;h:outputText value="\#{car.model}" /&gt;
	&lt;/p:column&gt;

	&lt;p:column&gt;
		&lt;f:facet name="header"&gt;
			&lt;h:outputText value="Year" /&gt;
		&lt;/f:facet&gt;
		&lt;h:outputText value="\#{car.year}" /&gt;
	&lt;/p:column&gt;

	&lt;p:column&gt;
		&lt;f:facet name="header"&gt;
			&lt;h:outputText value="Manufacturer" /&gt;
		&lt;/f:facet&gt;
		&lt;h:outputText value="\#{car.manufacturer}" /&gt;
	&lt;/p:column&gt;

	&lt;p:column&gt;
		&lt;f:facet name="header"&gt;
			&lt;h:outputText value="Color" /&gt;
		&lt;/f:facet&gt;
		&lt;h:outputText value="\#{car.color}" /&gt;
	&lt;/p:column&gt;
&lt;/p:dataTable&gt;
				</pre>
					</p:tab>
					
					<p:tab title="TableBean.java">
<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

import org.primefaces.examples.domain.Car;

public class TableBean implements Serializable {
	
	static {
		colors = new String[10];
		colors[0] = "Black";
		colors[1] = "White";
		colors[2] = "Green";
		colors[3] = "Red";
		colors[4] = "Blue";
		colors[5] = "Orange";
		colors[6] = "Silver";
		colors[7] = "Yellow";
		colors[8] = "Brown";
		colors[9] = "Maroon";
		
		manufacturers = new String[10];
		manufacturers[0] = "Mercedes";
		manufacturers[1] = "BMW";
		manufacturers[2] = "Volvo";
		manufacturers[3] = "Audi";
		manufacturers[4] = "Renault";
		manufacturers[5] = "Opel";
		manufacturers[6] = "Volkswagen";
		manufacturers[7] = "Chrysler";
		manufacturers[8] = "Ferrari";
		manufacturers[9] = "Ford";
	}
	
	private List&lt;Car&gt; cars;
	
	public TableBean() {
		carsSmall = new ArrayList&lt;Car&gt;();
		
		populateRandomCars(cars, 5);
	}
	
	private void populateRandomCars(List&lt;Car&gt; list, int size) {
		for(int i = 0 ; i &lt; size ; i++)
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
	}
	
	public List&lt;Car&gt; getCars() {
		return carsSmall;
	}

	private int getRandomYear() {
		return (int) (Math.random() * 50 + 1960);
	}
	
	private String getRandomColor() {
		return colors[(int) (Math.random() * 10)];
	}
	
	private String getRandomManufacturer() {
		return manufacturers[(int) (Math.random() * 10)];
	}
	
	private String getRandomModel() {
		return UUID.randomUUID().toString().substring(0, 8);
	}
}
				</pre>
					</p:tab>
				</p:tabView>
				
           
</div>

	</ui:define>
</ui:composition>
